<!-- 
  修改 Store 的 State 的方式
      1. 直接修改
          app.count = 100
      2. 使用仓库内置的$patch函数
          1. 对象式
          2. 函数式
      3. 使用仓库内置的$state属性
      4. 使用仓库中写好的action
 -->

<template>
  <h2>SetState {{ app.count }}</h2>
  <button @click="app.count = 100">直接修改</button>
  <button @click="app.$patch({ count: 200, list: [1] })">$patch Object</button>
  <button @click="app.$patch((state) => (state.count = 300))">
    $patch Function
  </button>
  <button @click="app.$state = { count: 400 }">$state</button>
  <button @click="app.change(500)">action</button>

  <button>Id 1: {{ app.getUserById(1) }}</button>
  <button>Id 2: {{ app.getUserById(2) }}</button>

  <!-- <button>Id 1: {{ app.getUserById2(1) }}</button> -->
  <!-- <button>Id 2: {{ app.getUserById2(2) }}</button> -->
</template>

<script lang="ts" setup>
import useAppStore from "../stores/app";

const app = useAppStore();

// console.log("app", app);
</script>
